<template>
    <div class="financeInterests">
        <h2 class="my-big-font">权益对账单</h2>
        <div class="financeInterests-header">
            <div class="header-box">
                <div class="header-one">
                    <span style="padding-right:10px;">账号</span>
                    <input class="input" type="text" v-model="iptValue1" placeholder="订单编号/充值手机号">
                </div>
                <div class="header-one">
                    <span style="padding-right:10px;">下单时间</span>
                    <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </div>
                <div class="header-one">
                    <span style="padding-right:10px;">状态</span>
                    <el-select v-model="stateValue" placeholder="请选择状态" clearable>
                        <el-option v-for="item in stateOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="header-one">
                  <span style="padding-right:10px;">分类</span>
                  <el-select v-model="classifyValue" placeholder="请选择状态" clearable>
                    <el-option v-for="item in classifyOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                  </el-select>
                </div>
                <div class="header-one">
                    <span style="padding-right:10px;">品牌</span>
                    <el-select v-model="brandValue" placeholder="请选择状态" clearable>
                        <el-option v-for="item in brandOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="header-one">
                    <span style="padding-right:10px;">产品名称</span>
                    <el-select v-model="nameValue" placeholder="请选择产品名称" clearable>
                        <el-option v-for="item in nameOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- <span class="my-btn btn" @click="searchClick">筛选</span> -->
            <div class="btn-box">
                <span class="my-btn btn" @click="searchInterestsData">筛选</span>
                <span class="my-btn2 btn" @click="lendingOut">导出</span>
                <!-- <el-button type="primary" icon="el-icon-download" @click="handleDownload" class="filter-item">导出</el-button> -->
            </div>
        </div>
        <div class="table-box">
            <table style="width: 100%;margin-top:20px;">
                <tr class="titleTr">
                    <td>订单编号</td>
                    <td>用户账号</td>
                    <td>产品编号</td>
                    <td>品牌</td>
                    <td width='90px'>产品名称</td>
                    <td>分类</td>
                    <td>规格(面值)</td>
                    <td>安卓订单金额</td>
                    <td>苹果订单金额</td>
                    <td>实际支付金额</td>
                    <td>供货价</td>
                    <td>平台收益</td>
                    <td width='114px'>支付时间</td>
                    <td>充值账号</td>
                    <td>状态</td>
                    <td width='90px'>备注</td>
                </tr>
                <tr v-for="p,i of financeInterestsData" :key="i">
                    <td><span>{{p.bh}}</span></td>
                    <td>{{p.userPhone}}</td>
                    <td>{{p.goodsId}}</td>
                    <td>{{p.pname}}</td>
                    <td>{{p.proName}}</td>
                    <td>{{p.categoryName}}</td>
                    <td>{{p.specsName}}</td>
                    <td>{{p.goodsparvalue}}</td>
                    <td>{{p.apGoodsparvalue}}</td>
                    <td>{{p.price}}</td>
                    <td>{{p.supplyCost}}</td>
                    <td>{{p.inMoney}}</td>
                    <td>{{format(p.payTime)}} </td>
                    <td>{{p.mobile}}</td>
                    <td>{{typeValue(p.type)}}</td>
                    <td>{{p.explains}}</td>
                </tr>
            </table>
            <div class="table-bottom">
                <span>累计充值{{sum}}条数，累计充值金额{{investMoney}}元，实际支付金额{{payMoney}}元，平台总收益{{inMoney}}元</span>
                <span>第{{currentPage}}页，共{{pageCount}}页</span>
            </div>
            <el-pagination @current-change="handleCurrentChange"  background layout="prev, pager, next" :page-count=pageCount></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            iptValue1:'',//账号
            dateValue:'',//日期
            classifyValue:'',//分类
            stateValue:'',//状态
            brandValue:'',//品牌
            nameValue:'',//产品名称
            sum:'',//累计充值条数
            investMoney:'',//累计充值金额
            payMoney:'',//实际支付金额
            inMoney:'',//平台总收益
            beginTime:'',
            endTime:'',
            classifyOptions:[//分类选项
            ],
            stateOptions:[//状态选项
                {
                  id: '0',
                  name: '未到账'
                },
                {
                  id: '1',
                  name: '已到账'
                }
            ],
            brandOptions:[//品牌选项
            ],
            nameOptions:[//产品名称选项
            ],
            financeInterestsData:[
               {
                    id:'',
                    bh: '',
                    userid:'',
                    goodsId:'',
                    pname:'',
                    proName:'',
                    categoryName:'',
                    specsName:'',
                    goodsparvalue:'',
                    apGoodsparvalue:'',
                    original:'',
                    price:'',
                    supplyCost:'',
                    payTime:'',
                    inMoney:'',
                    type:'',
                    explains:''
                }
            ],
            // 分页
            pageNum:6,//每页6条
            pageCount:null,//一共几页
            currentPage:'',//当前页码
            count:''
        }
    },
    mounted(){
        this.currentPage=1
        this.getInterestsData()
        this.getnameOptions()
        this.getclassifyOptions()
        this.getbrandOptions()
    },
    methods:{
        //分页
        handleCurrentChange(page) {
            this.currentPage=page
            this.getInterestsData()
        },
        searchInterestsData(){
            this.currentPage=1
            this.getInterestsData()
        },
        //获取充值数据
        getInterestsData(){
            var dateValuelist =  this.dateValue.toString().split(",")
            if(dateValuelist.length==2){
                this.beginTime = (new Date(dateValuelist[0])).getTime() / 1000;
                this.endTime = (new Date(dateValuelist[1])).getTime() / 1000;
            }
            this.axios.post('/recharge/sys/order/vipList?limit='+this.pageNum+'&page='+this.currentPage+'&bh='+this.iptValue1+'&type='+this.stateValue
                +'&shopId='+this.nameValue+'&categoryId='+this.classifyValue
                +'&pid='+this.brandValue+'&beginTime='+this.beginTime+'&endTime='+this.endTime).then(result=>{
                this.financeInterestsData=result.data.data.data;
                this.pageCount = Math.ceil(result.data.data.count/this.pageNum);
                this.sum=result.data.data.sum;
                this.investMoney=result.data.data.investMoney;
                this.payMoney=result.data.data.payMoney;
                this.inMoney=result.data.data.inMoney;
                this.count=result.data.data.count
            })
        },
        typeValue(value){
            if(value!=null){
              return (value==1)?'已到账':'未到账';
            }
        },
        //获取分类数据
        getclassifyOptions(){
            this.axios.post('/recharge/sys/category/listVip').then(res=>{
                this.classifyOptions=res.data.data
            })
        },
        //获取品牌分类数据
        getbrandOptions(){
            this.axios.post('/recharge/sys/vipshop/vipPNames?categoryId='+this.classifyValue).then(res=>{
                this.brandOptions=res.data.data
            })
        },
        //获取产品名称分类数据
        getnameOptions(){
            this.axios.post('/recharge/sys/vipshop/vipProNames?id='+this.brandValue).then(res=>{
                this.nameOptions=res.data.data
            })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map((v) => filterVal.map((j) => v[j]));
        },
        lendingOut(){
            var dateValuelist =  this.dateValue.toString().split(",")
            if(dateValuelist.length==2){
                this.beginTime = (new Date(dateValuelist[0])).getTime() / 1000;
                this.endTime = (new Date(dateValuelist[1])).getTime() / 1000;
            }
            this.axios.post('/recharge/sys/order/vipList?limit='+this.count+'&page=1&bh='+this.iptValue1+'&type='+this.stateValue
                +'&shopId='+this.nameValue+'&categoryId='+this.classifyValue
                +'&pid='+this.brandValue+'&beginTime='+this.beginTime+'&endTime='+this.endTime).then(result=>{
                this.financeInterestsData333=result.data.data.data;
            })
            this.$message({/*导出数据量大时加提示，设置setTimeout延时 */
                type: "info",
                message: '正在导出，请稍候...'
            });
            setTimeout(()=>{
                import('@/vendor/Export2Excel').then(excel => {
                    /* 设置Excel的表格第一行的标题 */
                    const tHeader = [ "订单编号", "用户账号", "产品编号","品牌","产品名称","分类","规格(面值)","安卓订单金额","苹果订单金额","实际支付金额","供货价","平台收益","支付时间" ,"充值账号","状态","备注"];
                    /* filterValue里的值是tableData里对象的属性 */
                    const filterValue = [ "bh", "userPhone", "goodsId", "pname", "proName", "categoryName", "specsName", "goodsparvalue", "apGoodsparvalue", "price", "supplyCost", "inMoney", "payTime", "mobile", "type","explains"];/*导出列表的字段 */
                    this.financeInterestsData333.forEach(e=>{
                        e.payTime=this.format(e.payTime)
                        e.type=this.typeValue(e.type)
                    })
                    let Data = this.financeInterestsData333/*请求接口返回导出数组 */
                    const list = Data;
                    console.log("list", Data);
                    const data = this.formatJson(filterValue, list);
                    excel.export_json_to_excel({
                        header: tHeader,
                        data,
                        filename: '权益对账单'
                    })
                });
            },2000)
        },
        //处理时间戳
        format(shijianchuo) {
            if(shijianchuo){
                var time = new Date(parseInt(shijianchuo)*1000);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();
                var f = time.getMinutes();
                var s = time.getSeconds();
                //想要什么格式可以自己改
                // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
                return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            }
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
    watch:{
      financeInterestsData(){
        var mm=this.financeInterestsData.length
        if(mm<this.pageNum){
          for(var n=0;n<this.pageNum-mm;n++){
            this.financeInterestsData.push({'bh':'  '})
          }
        }
      },
      classifyValue(){
          this.getbrandOptions()
          this.brandValue=''
          this.nameValue=''
      },
      brandValue(){
          this.getnameOptions()
          this.nameValue=''
      }
    }
}
</script>

<style scoped>
.financeInterests{
    padding: 30px 82px 90px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
    color: #333333;
    min-height:calc(100vh - 96px);
    position: relative;
}
.financeInterests h2{
    padding-top: 0;
}
/* 充值记录头部 */
.financeInterests-header{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}
.header-box{
    max-width: calc(100% - 155px);
    display: flex;
    flex-wrap: wrap;
}
.btn-box{
    width: 155px;
    display: flex;
    justify-content: space-between;
}
.header-one{
    min-width: 250px;
    margin-bottom: 20px;
    margin-right: 30px;
}
/* 表格 */
.table-box{
    padding-top: 20px;
}
.table-bottom{
    display: flex;
    justify-content: space-between;
    color: #444;
    font-size: 14px;
    margin-top: 15px;
}
table .titleTr{
    background:rgba(246, 246, 246, 1);
}
table tr{
    border: .5px solid #eee;
}
table td{
    padding: 10px 5px;
    text-align: center;
    min-width: 40px;
    color: #555;
    font-size: 12px;
    word-wrap: break-word;
}
table td span{
    display: inline-block;
    min-height: 15px;
}
</style>
<style scoped>
/* input框 */
.input{
    height: 35px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    padding-left: 10px;
}
/* 按钮 */
.btn{
    display: inline-block;
    /* margin-left: 15px; */
    width: 70px;
    height: 33px;
    line-height: 33px;
    padding: 0!important;
    font-size: 15px;
    border: 0;
    margin: 0;
    text-align: center;
}
.my-btn2{
    background: #fff;
    border: 2.5px solid rgba(255, 218, 59, 1);
    line-height: 30px;
}
input{
    min-width: 210px;
    font-size: 14px!important;
} 
</style>
<style>
.el-date-editor .el-range-separator{
    width: 20px!important;
}
</style>